﻿<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <!-- <el-button
                    type="primary"
                    icon="el-icon-plus"
                    @click="opAntiAuditTask"
                >反审核</el-button> -->
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="编号" label-width="100px">
                        <el-input
                            placeholder="---请输入编号---"
                            v-model="queryList.orderCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="收货单位" label-width="100px">
                        <sc-apply-org-select
                            ref="orgselect"
                            :props="props"
                            :selectKeyValue="'storeId'"
                            v-model="queryList.store"
                            :multiple="false"
                            @fatherMethod="orgSelectProcess"
                        ></sc-apply-org-select>
                    </el-form-item>
                    <el-form-item label="创建人" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.crName"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="创建时间" label-width="100px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.crDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                    <el-form-item label="物料分类" label-width="100px">
                        <el-tree-select
                            placeholder="---请选择物料分类---"
                            v-model="queryList.materialTypeIds"
                            :props="{ label: 'label', value: 'value', children: 'children' }"
                            :data="materialTypeTree"
                            multiple
                            collapse-tags
                            collapse-tags-tooltip
                            :render-after-expand="false"
                            show-checkbox
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料编码" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.materialCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料简码" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.materialSimpCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料名称" label-width="100px">
                        <el-input
                            placeholder="---请输入名称---"
                            v-model="queryList.materialName"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="类型" label-width="100px">
                        <el-select
                            placeholder="---请选择类型---"
                            v-model="queryList.orderType"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsTaskOrderType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" label-width="100px">
                        <el-select
                            placeholder="---请选择状态---"
                            v-model="queryList.taskStatus"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否待审核" label-width="100px">
                        <el-select
                            placeholder="---请选择状态---"
                            v-model="queryList.taskOrderItemStatus"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option label="是" :value="2" />
                            <el-option label="否" :value="1" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
            <scTable
                ref="mytable"
                :queryType="'task-order/audit-pages'"
                :data="listData"
                :queryList="queryList"
                :column="columnList"
                :orderList="OrderList"
                :sort-orders="['ascending', 'descending']"
                @selection-change="selectionChange"
                row-key="orderCode"
                key="orderCode"
                stripe
                border
                show-summary
                remoteSummary
            >
                <el-table-column type="selection" width="50"></el-table-column>
                <template #orderDate="{row}">{{row.orderDate?.slice(0,10)}}</template>
                <template #taskStatus="{row}">{{row.taskStatusDesc}}</template>
                <template #taskOrderStatus="{row}">{{row.taskOrderStatusDesc}}</template>
                <template #taskOrderType="{row}">{{row.taskOrderTypeDesc}}</template>

                <template #materialDesc="{row}">
                    <el-popover placement="bottom-start" :width="800" trigger="click">
                        <template #reference>
                            <div
                                style="position: relative;text-overflow: ellipsis;white-space: nowrap;cursor: pointer;display: block;"
                            >
                                <span
                                    v-for="item in row.taskMaterialDetails"
                                    :key="item"
                                    style="color: #318cf3;"
                                >
                                    {{item.materialName}}/
                                    {{item.alreadyTaskQty}}
                                    {{item.unitName}};
                                </span>
                            </div>
                        </template>
                        <!-- <div
                            style="text-align: center;margin: 10px;font-size: 16px;font-weight: bold;"
                        >物料明细</div>-->
                        <el-table :data="row.taskMaterialDetails" :style="row.taskMaterialDetails?.length>6?'height: 300px;width: 100%;':'width: 100%;'"  stripe>
                            <el-table-column prop="materialName" label="物料名称" min-width="120"/>
                            <el-table-column prop="materialSpecs" label="规格" min-width="100" />
                            <el-table-column prop="unitName" label="单位" min-width="80" />
                            <el-table-column prop="supplierName" label="供应商" min-width="100" />
                            <el-table-column prop="qty" label="要货/赠送" min-width="80" />
                            <el-table-column prop="receiveQty" label="供应商接单" min-width="80" />
                            <el-table-column prop="alreadyTaskQty" label="累计收货" min-width="80" />
                        </el-table>
                    </el-popover>
                </template>

                <el-table-column label="操作" fixed="right" align="right" width="230">
                    <template #default="scope">
                        <el-button-group>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opDetail(scope.row, scope.$index)"
                            >查看</el-button>
                        </el-button-group>
                        <el-button-group>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                v-show="scope.row.taskOrderStatus==2"
                                @click="opAudit(scope.row, scope.$index)"
                            >审核</el-button>
                        </el-button-group>
                        <el-button-group>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                v-show="scope.row.taskOrderStatus==1"
                                @click="opAudit(scope.row, scope.$index)"
                            >反审核</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>

    <task-audit-dialog
        v-if="dialogTaskAudit"
        ref="taskAuditDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogTaskAudit = false"
    ></task-audit-dialog>
</template>

<script>
import taskAuditDialog from "./audit";
import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
import config from "@/config";
export default {
    name: "posInfo-room",
    components: {
        taskAuditDialog,
        publicjs,
    },
    data() {
        return {
            dialogTaskAudit:false,
            selectionRows: [],
            pkList: ["orderCode"],
            columnList: [
                {
                    prop: "orderDate",
                    label: "业务时间",
                    width: "120",
                    sortable: true,
                },
                {
                    prop: "taskOrderType",
                    label: "订单类型",
                    width: "110",
                    sortable: true,
                },
                {
                    prop: "orderCode",
                    label: "关联单号",
                    width: "150",
                    sortable: true,
                },
                {
                    prop: "storeName",
                    label: "收货客户",
                    width: "160",
                    sortable: true,
                },
                {
                    prop: "materialDesc",
                    label: "收货物料",
                    width: "700",
                    sortable: false,
                },
                {
                    prop: "taskStatus",
                    label: "收货状态",
                    width: "150",
                    sortable: true,
                },
                {
                    prop: "taskOrderStatus",
                    label: "是否待审核",
                    width: "150",
                    sortable: true,
                },
            ],
            OrderList: { orderCode: "Asc" },
            queryList: {
                warehouseCode: "",
                warehouseName: "",
                status: "",
                taskOrderItemStatus:2
            },
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            props:{
                label: "storeOrgName",
                value: "storeId",
            },
            orgCodeList: "",
            orgNameList: "",
            showCondition:false,
            addState: true, //可以增加
            editState: true, //可以修改
            editBatchState: true, //可以批量修改
            deleteState: true, //可以删除
            optionsStatus: [],
            optionsTaskOrderType:[],
            materialTypeTree: [],
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    methods: {
        goTo(row){
            if(row.taskOrderType==0){
                // 跳转地址按要求更换
                this.$router.push({ path: '/apply/order', query: { applyOrderCode: row.orderCode} });
            }else{
                this.dialogGiveDetail = true;
                this.$nextTick(() => {
                    this.$refs.giveDetailDialog.setData({giveOrderId:row.orderId});
                    this.$refs.giveDetailDialog.open("Show");
                });
            }
		},
        //收货审核
        opAudit(row) {
            this.dialogTaskAudit = true;
            this.$nextTick(() => {
                this.$refs.taskAuditDialog.setData(row);
                this.$refs.taskAuditDialog.open("Task");
            });
        },
          //查看
          opDetail(row) {
            this.dialogTaskAudit = true;
            this.$nextTick(() => {
                this.$refs.taskAuditDialog.setData(row);
                this.$refs.taskAuditDialog.open("Show");
            });
        },
        //批量审核
        opBatchAuditTask(){
            if (this.selectionRows.length == 0) {
                this.$message.error("请选择要审核的订单");
                return;
            }

            if (this.selectionRows.some(p=>p.status!=2)) {
                this.$message.error("请选择待审核的订单");
                return;
            }

            this.dialogTaskAudit = true;
            this.$nextTick(() => {
                this.$refs.taskAuditDialog.setData(this.selectionRows);
                this.$refs.taskAuditDialog.open("Task");
            });
        },
        //反审核
        async opAntiAuditTask(){
            if (this.selectionRows.length == 0) {
                this.$message.error("请选择要反审核的订单");
                return;
            }

            if (this.selectionRows.some(p=>p.status==2)) {
                this.$message.error("请选择已审核的订单");
                return;
            }

            let  taskOrderItemIds=[];
            this.selectionRows.forEach(p=>p.taskOrderItems.forEach(t=>taskOrderItemIds.push(t.taskOrderItemId)));
            try {
                this.isSaveing = true;
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "task-order/anti-audit-task-order",
                    {taskOrderItemIds:taskOrderItemIds}
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$emit("fatherMethod");
                    this.isSaveing = false;
                    this.visible = false;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                    this.isSaveing = false;
                }
            } catch (error) {
                this.loading = false;
                this.isSaveing = false;
                return false;
            }
        },
        //收货审核记录
        opAuditRecords(row) {
            this.dialogTaskRecords = true;
            this.$nextTick(() => {
                this.$refs.taskRecordsDialog.setData([row.taskOrderItemId]);
                this.$refs.taskRecordsDialog.open("Task");
            });
        },
      
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = {};
        },
        async orgSelectProcess(rowData) {
            this.queryList.store = {...rowData};
            this.queryList.storeId = rowData.storeId;
            this.queryList.storeOrgType = rowData.storeOrgType;
            await this.opBindData();
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["TaskOrderType","TaskStatus"] }
                );
                if (returnValue.status == 200) {
                    this.optionsStatus = returnValue.response.find(
                        (p) => p.code == "TaskStatus"
                    ).optionsDetails;
                    this.optionsTaskOrderType = returnValue.response.find(
                        (p) => p.code == "TaskOrderType"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material-type/tree",
                    { status: 1 }
                );
                if (returnValue.status == 200) {
                    this.materialTypeTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
    },
    async mounted() {
        var taskOrderCode=this.$route.query.taskOrderCode; 
        if(taskOrderCode){
            this.queryList.taskOrderCode=taskOrderCode;
        }
        await this.initOptions();
        await this.opBindData();

    },
};
</script>
